<template>
  <div>
    <van-nav-bar
      title="电影详情"
      left-arrow
      fixed
      placeholder
      z-index="999"
      @click-left="$router.back()"
    />

<div  v-if="loading">
  <van-skeleton title avatar :row="3" />
  <van-skeleton title :row="6" />
</div>

    <div class="box" v-else>
      <div class="banner">
        <img :src="intro.img" alt="" />
      </div>
      <div class="jianjie">
        <!-- 图片 -->
        <div class="imgBox">
          <img :src="intro.img" />
        </div>
        <!-- 电影信息 -->
        <div class="text">
          <!-- 名字 -->
          <div class="name">{{ intro.name }}</div>
          <!-- 时长 -->
          <div class="shichang">{{ intro.duration }}</div>
          <!-- 电影类型 -->
          <div class="type">{{ intro.type }}</div>
          <!-- 类型 -->
          <div class="leixing" style="font-size: 10px">
            <span
              style="
                border: 1px solid #9392a7;
                transform: scale(0.7);
                display: inline-block;
                margin-left: -10px;
              "
              v-for="(item, i) in intro.formats"
              :key="i"
            >
              <i style="color: white; background: #9392a7; padding: 0 4px">{{
                item.split("-")[0]
              }}</i>
              <i style="color: #9392a7; background: white; padding: 0 4px">{{
                item.split("-")[1]
              }}</i>
            </span>
          </div>
          <!-- 评分 -->

          <div class="star">
            <van-rate
              v-model="score"
              :size="20"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              allow-half
              readonly
            />
           9分
          </div>
          <p>{{intro.startTime}}</p>
        </div>
        <div class="jianjie-bottom-bg"></div>
      </div>
      <div class="img">
        <div class="title">
          <i style="font-size: 20px">影片剧情照</i>
        
<!-- intro   {}
初始化  intro.stageImgs  是 undefined.length -->
          <i style="color: gray">{{imgLen}}></i> 
        </div>
        <div class="imgBox">
        <div class="imgBoxInner" >
                <img @click="showStageImgs(index)"  v-for="(item,index) in intro.stageImgs" :src="item" :key="index" />
        </div>
 
     
        </div>
      </div>
      <div class="juqing">
        <h3>剧情介绍</h3>
        <!-- 导演 -->
        <p><i>导演:</i>{{intro.director}}</p>
        <!-- 主演 -->
        <p><i>主演:</i> {{intro.star}}</p>
        <!-- 剧情简介 -->
        <div class="jieshao"><i>剧情:</i>{{intro.stage}}</div>
      </div>
      <button class="btn red" @click="$router.push(`/filmsOrder?filmsId=${$route.query.filmsId}`)">购票</button>
    </div>
  </div>
</template>

<script>
import { Rate ,Skeleton,ImagePreview} from "vant";
export default {
  data() {
    return {
      intro: {},
      loading:true
    };
  },
  components: {
    [Rate.name]: Rate,
    [Skeleton.name]:Skeleton
  },
  computed:{
     score(){
         if(!this.intro.score) return 0
         return this.intro.score/2
     },
  imgLen(){
    //  if(this.intro.stageImgs){
    //    return this.intro.stageImgs.length
    //  }
    
    return this.intro.stageImgs?.length
  }
  },
  created() {
    //  获取详情
    this.getFilmsDetail();
  },
  methods: {
    getFilmsDetail() {
      let { filmsId } = this.$route.query;
      this.$http
        .post("/apis/films/pub/getDetail", {
          filmsId,
        })
        .then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.intro = res.rows[0];
          } else {
            this.$toast(res.msg);
          }
          this.loading = false
        });
    },
    showStageImgs(index){


          ImagePreview({
            images:this.intro.stageImgs,  //  预览的图片
            startPosition: index, 
          })
    }
  },
};
</script>

<style scoped lang="scss">
.box {
  overflow: hidden;
  position: relative;
  padding-bottom: 50px;
  .banner {
      position: absolute;
      width: 100%;
      height: 160px;
      left: 0;
      top:0;
      z-index: 5;
    img {
      width: 100%;
      filter: blur(30px);
      height: 100px;
      object-fit: cover;
    }
  }
  .jianjie {
    width: 355px;
    margin: 15px 0 10px;
    padding: 0 10px;
    position: relative;
 
    .jianjie-bottom-bg {
      position: absolute;
      background: #fff;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70px;
      z-index: 6;
      border-radius: 8px 8px 0 0;
    }
    .imgBox {
      position: relative;
      z-index: 7;
      float: left;
      width: 120px;
      margin-right: 10px;
      img {
        max-width: 100%;
        height: 150px;
        overflow: hidden;
      }
    }
    .text {
      position: relative;
      z-index: 7;
      div {
        // padding-bottom: 5px;
      }
      .name {
        font-size: 20px;
        color: white;
        margin-bottom: 10px;
      }
      .type {
        margin-bottom: 10px;
      }
    }
  }
  .img {
    margin: 10px 10px 0 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(211, 208, 208);
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .imgBox {
     width: 100%;
     overflow: hidden;
     .imgBoxInner{
         height: 100px;
         white-space: nowrap;
         overflow-x: scroll;
         font-size: 0;
     }
      img {
      
        height: 100px;
        margin: 0 10px;
        display: inline-block;
      }
    }
  }
  .juqing {
    margin: 10px 10px 0 10px;
    height: 300px;
    h3 {
      font-size: 20px;
      font-weight: normal;
      margin-bottom: 10px;
    }
    p,
    div {
      font-weight: 200;
      margin-bottom: 5px;
    }
    i {
      font-weight: normal;
    }
  }
  .btn {
    width: 100vw;
    height: 60px;
    position: fixed;
    bottom: 0;
    border: none;
    color: white;
  }
  .red {
    background: #da281c;
  }
  .blue {
    background: #389afc;
  }
}
</style>
